<template>
	<div id="comorders">
		<div id="pay_tab1" class="tab1">
			<div class="com_top">
				<div class="top">
					<img src="../../assets/orders/o_zuo.png" />
					<p>确认订单</p>
				</div>
				<div class="top_mainban">
					<div class="mianban_bb">
						<div class="mianban_add">
							<p>收货地址</p>
							<p>北京理工大学国防科技园2号楼10层</p>
						</div>
						<img src="../../assets/orders/jiantou.png" />
					</div>
					<div class="mianban_xb">
						<p>瑶妹（先生）</p>
						<p>18911024266</p>
					</div>
				</div>
				<div class="shop-table1">
					<p>沃尔玛</p>
					<div class="shangpin" v-for="item in splist">
						<img :src="item.url" />
						<div class="jiage">
							<span>{{item.danjia}}</span>
							<div class="zongjia">
								<span>{{item.jisuan}}</span>
								<span class="zong">{{item.zonge}}</span>
							</div>
						</div>
					</div>
					<div class="xiala">
						<span style="padding-right: 8px;">共计6件/1.5kg</span>
						<span>﹀</span>
					</div>
				</div>
			</div>
			<div class="order_bottom">
				<p>实付金额</p>
				<p>￥62</p>
				<p>提交订单</p>
			</div>
		</div>
		<div class="pay_tab2" id="tab2">
			<div class="tab2_mb">
					<div class="p_img1">
						<img @click="toorder()" src="../../assets/orders/cha.png" />
					</div>
					<div class="p_img2">
						<img src="../../assets/orders/duigou.png" />
						<p>支付成功，等待配送</p>
					</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				splist:[
					{
						url:require("../../assets/orders/fanqie.png"),
						danjia:"番茄250g/份",
						jisuan:"￥33.3 x 3",
						zonge:"¥99.9"
					},{
						url:require("../../assets/orders/icon_order.png"),
						danjia:"樱桃250g/份",
						jisuan:"￥50 x 3",
						zonge:"¥150"
					}
				]
			}
		},
		methods:{
			no(){
				this.$router.push('/comorders')
			},
			sure(){
				this.$router.push('/comorders')
			},
			toorder(){
				this.$router.push('/home/orders')
			}
		}
	}
</script>

<style scoped>
	#comorders{
		margin: 0;
		padding: 0;
		height: 100%;
		position: fixed;
		width: 100%;
		background:#f8f8f8;
	}
	.com_top{
		height: 142px;
		padding-top: 41px;
		background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, #0091FF 50%);
	}
	.top{
		display: flex;
		padding-bottom: 22px;
	}
	 .top img{
		padding-left: 18px;
		width: 12px;
		height: 21px;
	}
	.top p{
		text-align: center;
		font-size: 16px;
		color: #FFFFFF;
		flex: 1;
	}
	.top_mainban{
		background: #FFFFFF;
		border-radius: 4px;
		height: 111px;
		margin: 0 18px 16px 18px;
	}
	.mianban_bb{
		display: flex;
		justify-content: space-between;
		padding-left: 16px;
	}
	.mianban_bb img{
		width: 8px;
		height: 16px;
		padding-right: 16px;
		padding-top: 48px;
	}
	.mianban_add :nth-child(1){
		font-size: 16px;
		color: #333333;
		padding: 16px 0 14px 0;
	}
	.mianban_add :nth-child(2){
		font-size: 14px;
		color: #333333;
	}
	.mianban_xb{
		display: flex;
		padding-top: 6px;
	}
	.mianban_xb p{
		font-size: 12px;
		color: #666666;
		padding-left: 16px;
	}
	.order_bottom {
		background: #FFFFFF;
		height: 49px;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #F1F1F1;
	}
	
	.order_bottom :nth-child(1){
		font-size: 14px;
		color: #333333;
		padding-left: 24px;
		padding-right: 5px;
	}
	
	.order_bottom :nth-child(2) {
		font-size: 16px;
		color: #333333;
		flex: 1;
	}
	
	.order_bottom :nth-child(3) {
		font-size: 14px;
		color: #FFFFFF;
		background-color: #1FA4FC;
		padding: 14px 28px 14px 28px;
	}
	#pay_tab1{
		background-color: #f8f8f8;
		height: 100%;
		position: fixed;
		width: 100%;
	}
	.tab1{
		position: absolute;
		z-index: 1;
	}
	.pay_tab2{
		background: rgba(0, 0, 0, 0.50);
		align-items: center;
	}
	#tab2{
		position: absolute;
		z-index: 2;
		top: 0px;
		left: 0;
		height: 189%;
		width: 100%;
	}
	.tab2_mb{
		background: #FFFFFF;
		border-radius: 4px;
		margin: 243px 37px 0 37px ;
		height: 157px;
	}
	.p_img1{
		text-align: end;
		padding-top: 12px;
		padding-right: 12px;
	}
	.p_img2{
		text-align: center;
	}
	.p_img2 :nth-child(1){
		padding-top: 16.2px;
		padding-bottom: 12px;
	}
	.p_img2 :nth-child(2){
		font-size: 18px;
		color: #333333;
	}
</style>
